<template>

    <NuxtLayout name="manage-layout">
        <template #main>
            <div class="flex flex-col gap-4">
                <div class="h-16"></div>
                <div class="flex gap-4 flex-wrap">
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <div id="echarts-User" class="flex min-w-96 w-full h-96">
                            </div>
                        </div>
                    </div>
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <div id="echarts-Gonggao" class="flex min-w-96 w-full h-96">
                            </div>
                        </div>
                    </div>
                    <div class="card bg-base-100 shadow-xl">
                        <div class="card-body">
                            <div id="echarts-Baogao" class="flex min-w-96 w-full h-96">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </NuxtLayout>


</template>

<script setup>
import * as echarts from 'echarts';
import {httpGet} from "~/utils/http/http-helper.js";
import {notificationError} from "~/utils/notification/index.js";
// index为我们要通过route.meta传递给公共布局文件的参数
definePageMeta({
    index: 'manage-index',
})

if(process.client){
    loadUserStatistics()
    loadGonggaoStatistics()
    loadBaogaoStatistics()
}
function loadUserStatistics(){
    httpGet('/api/user/day-newly-added').then(resp => {
        if(!resp.success){
            notificationError(resp.msg)
            return
        }
        const dataList = resp.data
        const xAxis = []
        const yAxis = []
        if(dataList){
            for(let i=0; i<dataList.length; i++){
                const item = dataList[i]
                xAxis.push(item.day)
                yAxis.push(item.num)
            }
        }
        // 基于准备好的dom，初始化echarts实例
        const chart = echarts.init(document.getElementById('echarts-User'));
        // 绘制图表
        chart.setOption({
            title: {
                text: '近30日新增用户统计'
            },
            tooltip: {},
            xAxis: {
                data: xAxis
            },
            yAxis: {},
            series: [
                {
                    name: '数量',
                    type: 'line',
                    smooth: true,
                    data: yAxis
                }
            ]
        })
        window.addEventListener('resize', () => {
            chart.resize()
        })
    })
}
function loadGonggaoStatistics(){
    httpGet('/api/gonggao/day-newly-added').then(resp => {
        if(!resp.success){
            notificationError(resp.msg)
            return
        }
        const dataList = resp.data
        const xAxis = []
        const yAxis = []
        if(dataList){
            for(let i=0; i<dataList.length; i++){
                const item = dataList[i]
                xAxis.push(item.day)
                yAxis.push(item.num)
            }
        }
        // 基于准备好的dom，初始化echarts实例
        const chart = echarts.init(document.getElementById('echarts-Gonggao'));
        // 绘制图表
        chart.setOption({
            title: {
                text: '近30日新增公告统计'
            },
            tooltip: {},
            xAxis: {
                data: xAxis
            },
            yAxis: {},
            series: [
                {
                    name: '数量',
                    type: 'line',
                    smooth: true,
                    data: yAxis
                }
            ]
        })
        window.addEventListener('resize', () => {
            chart.resize()
        })
    })
}
function loadBaogaoStatistics(){
    httpGet('/api/baogao/day-newly-added').then(resp => {
        if(!resp.success){
            notificationError(resp.msg)
            return
        }
        const dataList = resp.data
        const xAxis = []
        const yAxis = []
        if(dataList){
            for(let i=0; i<dataList.length; i++){
                const item = dataList[i]
                xAxis.push(item.day)
                yAxis.push(item.num)
            }
        }
        // 基于准备好的dom，初始化echarts实例
        const chart = echarts.init(document.getElementById('echarts-Baogao'));
        // 绘制图表
        chart.setOption({
            title: {
                text: '近30日新增视力报告统计'
            },
            tooltip: {},
            xAxis: {
                data: xAxis
            },
            yAxis: {},
            series: [
                {
                    name: '数量',
                    type: 'line',
                    smooth: true,
                    data: yAxis
                }
            ]
        })
        window.addEventListener('resize', () => {
            chart.resize()
        })
    })
}
</script>